<extend name="./public/frame.html"/>
<block name="content">
    <style>
        blockquote {
            -webkit-margin-end: 0;
        }
    </style>
    <blockquote class="layui-elem-quote search">
        <div class="layui-inline">
            <select name="province_id" id="province_id" class="layui-input" lay-filter="province" style="width: 150px;" onclick="getProvinceList();">
                <option value="">请选择所属省份</option>
                <?php foreach($provinceList as $key=>$value):?>
                <option value="<?php echo $value['region_id'];?>"><?php echo $value['region_name'];?></option>
                <?php endforeach;?>
            </select>
        </div>
        <div class="layui-inline">
            <select name="city_id" id="city_id" class="layui-input" lay-filter="city_id" style="width: 150px;">
                <option value="">请选择所属城市</option>
            </select>
        </div>
        <div class="layui-inline">
            <input type="text" name="phone" lay-verify="required|title" required placeholder="请输入手机号"
                   class="layui-input" id="phone">
        </div>
        <div class="layui-inline">
            <button class="layui-btn" data-type="search">搜索</button>
        </div>
        <div class="layui-inline">
            <a href="javascript:void(0)" class="lea_but" id="gift_money_config"><button class="layui-btn layui-btn-xs4" style="background-color:#FFB800;"><span style="color:#fff">赠额配置</span></button></a>
        </div>
    </blockquote>
    <table class="layui-table" lay-data="{width:'auto', height:'auto', url:'{:url('Finance/userMoneyList')}', page: true, limit: 10, id:'test'}" lay-filter="test">
        <thead>
        <tr>
            <th lay-data="{checkbox:true, width:70,fixed: true}"></th>
            <th lay-data="{field:'wallet_id', width:70, fixed: true, sort: true}">ID</th>
            <th lay-data="{field:'region_name_province', width:100,align:'center'}">所属省份</th>
            <th lay-data="{field:'region_name_city', width:100,align:'center'}">所属城市</th>
            <th lay-data="{field:'user_phone', width:120, sort: true, templet: '#usernameTpl'}">手机号</th>
            <th lay-data="{field:'role_type', width:120, sort: true, templet: '#usernameTpl'}">用户类型</th>
            <th lay-data="{field:'total_money', width:140, sort: true}">总额(元)</th>
            <th lay-data="{field:'available_money', width:140, sort: true}">可用余额(元)</th>
            <th lay-data="{field:'wallet_money', width:140, sort: true}">可提现余额(元)</th>
            <th lay-data="{field:'return_money', width:160, sort: true}">不可提现余额(元)</th>
            <th lay-data="{field:'gifts_money', width:160, sort: true}">赠送余额(元)</th>
            <th lay-data="{field:'frozen_money', width:160, sort: true}">冻结金额(提现中)</th>
            <th lay-data="{field:'total_money_recharge', width:160, sort: true}">充值总额(本金)</th>
            <th lay-data="{field:'total_money_withdraw', width:160, sort: true}">提现总额(到账)</th>
            <th lay-data="{fixed:'right', toolbar: '#barDemo', width:150, align:'center'}">操作</th>
        </tr>
        </thead>
    </table>

    <div class="layui-hide" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">明细</a>
        <!--   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="tixian">提现查看</a> -->
    </div>
    <script>
        layui.use('table', function () {
            var table = layui.table;

            //方法级渲染

            //监听表格复选框选择
            table.on('checkbox(test)', function (obj) {
                console.log(obj)
            });

            //监听单元格编辑
            table.on('edit(test)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段

            });

            //点击查看 赠额配置
            $(document).on('click', '#gift_money_config', function(){
                layer.open({
                    type: 2,
                    title: '赠额配置项',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1000px', '80%'],
                    content: '{:url("/admin/finance/gift_money_config")}'
                });
            });

            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                var uid = data.uid;
                if (obj.event === 'detail') {
                    layer.open({
                        type: 2,
                        title: '用户提现信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/Finance/detail","uid=")}' + uid //iframe的url
                    });
                }
//                else if (obj.event === 'recharge') {
//                    layer.open({
//                        type: 2,
//                        title: '用户充值信息',
//                        shadeClose: true,
//                        shade: 0.8,
//                        area: ['480px', '80%'],
//                        content: '{:url("/admin/Finance/recharge","uid=")}' + uid //iframe的url
//                    });
//                }
            });

            //搜索
            $('.layui-btn').on('click', function () {
                var phone	     = $("#phone").val();
                var province_id  = $("#province_id").val();
                var city_id 		= $("#city_id").val();
                table.reload('test', {
                    url: '/admin/Finance/userMoneyList', where: {
                        "user_phone": phone,
                        "province_id": province_id,
                        "city_id": city_id,
                    }
                });
            });
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //墨绿主题
            laydate.render({
                elem: '#start' //指定元素
                , type: 'datetime'
                , theme: 'molv'
                //,range: true
                , trigger: 'click'
            });

            laydate.render({
                elem: '#end' //指定元素
                , type: 'datetime'
                , theme: 'molv'
                //,range: true
                , trigger: 'click'
            });

        });
        $(document).on('click', '#submits', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        function getProvinceList(){
            $("#city_id").empty();
            $("#city_id").append('<option value=>请选择认证城市</option>');
            var province_id = $("#province_id").val();
            $.ajax({
                url:'{:url("/admin/Franchisee/cityList")}',
                async:true,
                //dataType:'json',
                type:'post',
                data:{'province_id':province_id},
                success:function(res){
                    $("#city_id").append(res);
                },
                error:function(e){
                    layer.msg('请求错误');return false;
                }
            })
        };
    </script>
</block>
